<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="container">
				
				<!-- 搜索栏 -->
				<view class="search-container" @click="toSearch(category)">
					<uni-search-bar 
						placeholder="绒花" 
						bgColor="#ffffff"
						placeholderStyle="color: #a68a64;"
						:disabled="true"
					/>
				</view>
				
				<!-- 列表 -->
				<view class="book-grid">
					<view 
						class="book-card" 
						v-for="(item, index) in bookList" 
						:key="index"
						@click="togetBooksItem(item.allId,item.allAscriptionId)"
						:style="{'--delay': index * 0.1 + 's'}"
					>
						<view class="book-cover">
							<image 
								class="cover-image" 
								:src="item.allImg" 
								mode="aspectFill"
								lazy-load="true"
							></image>
			
						</view>
						<view class="book-info">
							<text class="book-title">{{item.allName}}</text>
							<text class="book-subtitle">{{item.allTitle}}</text>
						</view>
					</view>
				</view>
				
				<view class="bottom-space"></view>
			</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				statusBarHeight: 0,
				books:'books',
				navHeight: '', //整体顶部导航栏的高度
				statusBarHeight:'',//状态栏高度
				width:'',
				keyword: '遥看瀑布挂前川',
				bookList: [],
				category:''
			}
		},
		onLoad(option) {
		const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
			let id =option.id;
			this.category =id;
			uni.request({
				url: this.$BASE_URL.baseUrl+'/books/category/'+id,
				success: (res) => {
					this.bookList =res.data.data.booksAllList
				}
			})
			
		},
		methods:{
			//图片预览
			preview(i){
				let imgsArray = [];
				imgsArray[0] = i;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			togetBooksItem(id,allAscriptionId){
				uni.navigateTo({
					// 传递项目ID 和 分类所属ID
					url:`/pages/books/bookItem/bookItem?id=${id}&allAscriptionId=${allAscriptionId}&tip=1`
			
				})
					// console.log(id)
			},
			toSearch(category){
				uni.navigateTo({
					url: `/pages/search/search-books?category=${category}`
				})
			}
		}
			
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f4e9;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	
	/* 搜索栏样式 */
	.search-container {
		padding: 30rpx;
		background: linear-gradient(to bottom, rgba(124,25,30,0.1), transparent);
		position: sticky;
		top: 0;
		z-index: 10;
		
		.uni-searchbar {
			border-radius: 50rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 16rpx rgba(124,25,30,0.1);
		}
	}
	
	/* 书籍网格布局 */
	.book-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		padding: 0 30rpx;
	}
	
	/* 书籍卡片 */
	.book-card {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.05);
		transition: all 0.3s ease;
		animation: fadeInUp 0.6s ease-out forwards;
		opacity: 0;
		animation-delay: var(--delay);
		
		&:active {
			transform: scale(0.98);
		}
	}
	
	/* 书籍封面 */
	.book-cover {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 140%;
		overflow: hidden;
		background-color: #f0e6d6;
		
		.cover-image {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;
		}
		
	
	}
	
	/* 信息 */
	.book-info {
		padding: 24rpx 20rpx;
		
		.book-title {
			display: block;
			font-size: 30rpx;
			color: #3a2818;
			font-weight: bold;
			line-height: 1.4;
			margin-bottom: 10rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.book-subtitle {
			display: block;
			font-size: 26rpx;
			color: #a68a64;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	/* 底部留白 */
	.bottom-space {
		height: 40rpx;
	}
	
	/* 动画效果 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* 响应式设计 */
	@media (max-width: 600rpx) {
		.book-grid {
			grid-template-columns: 1fr;
			padding: 0 30rpx;
			gap: 30rpx;
		}
	}
</style>